<template>
  <div class="app-container pagePublic">
    <!--label-position:label对齐方式,inline行内表单-->
    <el-form ref="searchForm" :model="searchForm" :inline="true" :label-position="labelPosition" class="formPublic">
      <el-form-item label="订单名称">
        <el-input v-model="searchForm.orderName" placeholder="请输入订单名称" />
      </el-form-item>
      <el-form-item label="订单时间段">
        <el-date-picker
          v-model="searchForm.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :clearable="false"
        />
      </el-form-item>
      <!--<el-form-item label="接单员姓名">
        <el-input v-model="searchForm.personName" placeholder="请输入接单员姓名" />
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="success" icon="el-icon-edit" @click="addFrom">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableList"
        :height="tableHeight"
      >
        <el-table-column label="序号" align="center" width="80" type="index" />
        <el-table-column label="订单名称" align="center" property="orderName" show-overflow-tooltip />
        <el-table-column label="订单地址" align="center" property="orderAddress" show-overflow-tooltip />
        <el-table-column label="所属客户" align="center" property="companyName" show-overflow-tooltip />
        <el-table-column label="接单人员" align="center" property="clUserNames" show-overflow-tooltip />
        <el-table-column label="建筑面积" align="center" property="areas" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.areas">{{ scope.row.areas }}m²</span>
            <span v-else ></span>
          </template>
        </el-table-column>
        <el-table-column label="订单简介" align="center" property="remark" show-overflow-tooltip />
        <el-table-column label="订单工期" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.beginTime!=null">{{ scope.row.beginTime }}-{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="签约金额" align="center" property="commission" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.commission">{{ scope.row.commission }}元</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="接单员" align="center" property="clUserName" show-overflow-tooltip />-->
        <!--   <el-table-column label="完工日期" align="center" property="endTime" show-overflow-tooltip />-->
        <el-table-column label="创建时间" align="center" property="ctime" show-overflow-tooltip />
        <el-table-column label="订单备注" align="center" property="comment" show-overflow-tooltip />
        <el-table-column label="订单图片" align="center" width="230">
          <template slot-scope="scope">
            <div v-if="scope.row.iocn ==''||scope.row.iocn ==null">
              <img
                src="../../static/img/noData.jpg"
                style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"
              >
            </div>
            <div
              v-for="(item,index) in scope.row.iocn.split(',')"
              v-else-if="scope.row.iocn !=''||scope.row.iocn !=null"
              :key="index"
              style="display: inline-block;float: inside"
            >
              <img :src="$store.state.apiUrl+'file/'+item" style=" width: 60px;height: 60px;margin:0px 5px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="{row}">
            <div v-if="row.attas">
              <div style="margin:5px">
                <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
                <el-button type="primary" size="mini" @click="handleRemark(row)">备注</el-button>
                <el-button size="mini" type="primary" @click="handleRelease(row)">发布</el-button>
              </div>
              <div style="margin:5px">
                <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
                <el-button type="primary" size="mini" @click="opendetail(row)">详情</el-button>
                <el-button size="mini" type="success" @click="seeEnclosure(row)">附件</el-button>
              </div>
            </div>
            <div v-else>
              <div style="margin:5px">
                <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
                <el-button type="primary" size="mini" @click="handleRemark(row)">备注</el-button>
                <el-button size="mini" type="primary" @click="handleRelease(row)">发布</el-button>
              </div>
              <div style="margin:5px">
                <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
                <el-button type="primary" size="mini" @click="opendetail(row)">详情</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />
    <!--订单备注-->
    <el-dialog
      title="订单备注"
      :visible.sync="remarkFormVisible"
      width="500px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelRemark"
      class="dialogPublic"
    >
      <el-form ref="remarkForm" :model="remarkForm" class="formPublic">
        <el-form-item label="订单备注:" prop="orderRemark">
          <el-input v-model="remarkForm.orderRemark" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入订单备注" style="width:216px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="saveRemark">保存</el-button>
        <el-button @click="cancelRemark">取消</el-button>
      </div>
    </el-dialog>

    <!--新增/编辑-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="1100px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelForm"
      class="dialogPublic"
    >
      <el-form ref="dialogForm" :rules="rulesForm" :model="dialogForm" class="formPublic" style="display: flex">
        <div style="width:43%;display: inline-block;">
          <el-form-item prop="orderName" label="订单名称:">
            <el-input
              v-model="dialogForm.orderName"
              class="dialoginput"
              placeholder="请输入订单名称"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="orderAddr" label="订单地址:">
            <el-input
              v-model="dialogForm.orderAddr"
              class="dialoginput"
              placeholder="请输入订单地址"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item label="所属客户:" prop="orderClient">
            <el-select v-model="dialogForm.orderClient" placeholder="请选择所属客户" filterable clearable>
              <el-option
                v-for="item in orderClientData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="开始日期:" prop="startDate">
            <el-date-picker
              v-model="dialogForm.startDate"
              type="date"
              :picker-options="startTimeOptions"
              placeholder="请选择开始日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="结束日期:" prop="endDate">
            <el-date-picker
              v-model="dialogForm.endDate"
              type="date"
              :picker-options="endTimeOptions"
              placeholder="请选择结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="签约金额:" prop="commission">
            <el-input
              v-model="dialogForm.commission"
              class="dialoginput"
              placeholder="请输入签约金额"
              auto-complete="off"
            />元
          </el-form-item>
          <el-form-item label="订单简介:" prop="orderRemark">
            <el-input v-model="dialogForm.orderRemark" :autosize="{ minRows: 2, maxRows:6}" type="textarea" placeholder="请输入订单简介" style="width: 236px" />
          </el-form-item>
          <el-form-item label="接单人员:" prop="orderClerk">
            <el-select v-model="dialogForm.orderClerk" placeholder="请选择接单人员" multiple filterable @change="selectChange" @remove-tag="removeSelect">
              <el-option value="-1" label="全部" />
              <el-option
                v-for="item in orderClerkData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="isSelect"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="buildArea" label="建筑面积:">
            <el-input
              v-model="dialogForm.buildArea"
              class="dialoginput"
              placeholder="请输入建筑面积"
              auto-complete="off"
            />m²
          </el-form-item>
        </div>
        <div style="width:50%;display: inline-block;">
          <el-form-item label="订单照片:">
            <!-- <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-preview="handlePictureCardPreview"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <div v-for="(item,index) of dialogForm.orderPhoto" :key="index" class="imagehua">
                <img :src="'data:image/jpeg;base64,'+item.picturePath" class="avatar">
                <div class="imghua" @click.stop>
                  <i class="el-icon-delete" @click.stop="resertImg(index)" />
                </div>
              </div>
              <i
                v-if="dialogForm.orderPhoto.length<3"
                class="el-icon-plus avatar-uploader-icon imagehuaican"
              />
            </el-upload>
            <div style="width: 360px;text-align:right;color:#606266;font-size: 12px;">照片大小不超过2M，建议使用jpg格式</div>-->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="(file)=>{return beforeAvatarUpload(file)}"
            >
              <div v-for="(item,index) of dialogForm.orderPhoto" :key="index" class="imagehua">
                <img :src="$store.state.apiUrl+'file/'+item" class="avatar">
                <div class="imghua" @click.stop>
                  <i class="el-icon-delete" @click.stop="resertImg(index)" />
                </div>
              </div>
              <i
                v-show="dialogForm.orderPhoto.length<3"
                class="el-icon-plus avatar-uploader-icon imagehuaican"
              />
            </el-upload>
            <div style="width: 360px;text-align:right;color:#606266;font-size: 12px;">照片大小不超过2M</div>
          </el-form-item>
          <el-form-item label="附件:">
            <el-upload
              ref="uploadTable"
              style="width:360px"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :auto-upload="true"
              :on-remove="excelRemove"
              :before-upload="(file)=>{return beforeExcelUpload(file)}"
              :file-list="dialogForm.fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">上传文件不超过5M</div>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="dialogStatus=='add'?addData():updateData()">保存</el-button>
        <el-button @click="cancelForm">取消</el-button>
      </div>
    </el-dialog>



    <!-- 详情 -->
    <el-dialog
    :visible.sync="showDetail"
    width="60%"
    center
    :before-close="detailClose"
    >
    <el-tabs type="border-card" v-model="tabName">
      <el-tab-pane label="订单基本信息" name="first" >
        <el-form ref="dialogForm"  :model="detailForm" class="formPublic" style="display: flex">
          <div style="width:45%;display: inline-block;">
            <el-form-item prop="orderName" label="订单名称:">
              <span>{{ detailForm.orderName }}</span>
            </el-form-item>
            <el-form-item prop="orderAddr" label="订单地址:">
              <span>{{ detailForm.orderAddr }}</span>
            </el-form-item>
            <el-form-item label="所属客户:" prop="orderClient">
              <span>{{ detailForm.orderClient }}</span>
            </el-form-item>
            <el-form-item label="开始日期:" prop="startDate">
              <span>{{ detailForm.startDate }}</span>
            </el-form-item>
            <el-form-item label="结束日期:" prop="endDate">
              <span>{{ detailForm.endDate }}</span>
            </el-form-item>
            <el-form-item label="签约金额:" prop="commission">
              <span v-if=" detailForm.commission">{{ detailForm.commission }}元</span>
              <span v-else>0元</span>
            </el-form-item>
            <el-form-item label="结算金额:" prop="settleAmount">
              <span v-if="detailForm.settleAmount">{{ detailForm.settleAmount }}元</span>
              <span v-else>0元</span>
            </el-form-item>
            <el-form-item label="订单简介:" prop="orderRemark" style="display: flex">
              <el-input
                v-model="detailForm.orderRemark"
                type="textarea"
                placeholder="订单简介"
                :disabled="true"
                :autosize="{ minRows: 1, maxRows: 4}"
              />
            </el-form-item>
            <el-form-item label="接单人员:" prop="orderClerk">
              <span>{{ detailForm.orderClerk }}</span>
            </el-form-item>
            <el-form-item prop="buildArea" label="建筑面积:">
              <span v-if="detailForm.buildArea">{{ detailForm.buildArea}}m²</span>
              <span v-else></span>
            </el-form-item>
          </div>
          <div v-if="detailForm.orderPhoto.length>0" style="width: 45%">
            <img v-for="(item ,index) in detailForm.orderPhoto" :key="index" width="30%" :src="item" alt="">
          </div>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="订单记录" name="second" >
        <div style="min-height: 400px">
          <div>
            <h4>审核通过记录</h4>
            <header class="passhe">
              <span style="flex: 2">审核时间</span>
              <span style="flex: 3">订单评分</span>
              <span style="flex: 5">审核备注</span>
            </header>
            <div v-for="(item,index) in passorder" :key="index" class="pass">
              <span style="flex: 2">{{ item.ctime }}</span>
              <span style="flex: 3">
                <el-rate
                  v-model="star"
                  disabled
                  :colors="colors"
                />
              </span>
              <span style="flex: 5">{{ item.remark }}</span>
            </div>
          </div>
          <div style="margin-top: 20px">
            <h4>订单驳回记录</h4>
            <header class="passhe">
              <span style="flex: 1">序号</span>
              <span style="flex:2">驳回状态</span>
              <span style="flex: 3">驳回时间</span>
              <span style="flex: 6">驳回备注</span>
            </header>
            <div v-for="(item,index) in refusedorder" :key="index" class="pass">
              <span style="flex: 1">{{ index+1 }}</span>
              <span style="flex: 2" v-if="item.type==1&&item.status==2">审核驳回</span>
              <span style="flex: 2" v-if="item.type==3">延期驳回</span>
                <span style="flex: 3">
                  {{ item.ctime }}
                </span>
              <span style="flex: 6">{{ item.remark }}</span>
            </div>
          </div>
        </div>

      </el-tab-pane> -->
    </el-tabs>
    </el-dialog>
    <!-- 附件 -->
    <yulan v-if="showEnclosure" :enclosre="enclosreTable" @closeEnclosure="closeEnclosure" />
  </div>
</template>

<script>
import { formatDate } from '../../static/js/data'
import yulan from '../../static/component/yulan'
import axios from 'axios'
import { orderClientData, orderClerkData, orderList, uploadFile, orderAdd, orderRowList, orderUpdate, orderRelease, orderDelete ,saveOrderRemark,hisquery} from '@/api/article'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'NotRelease',
  components: { Pagination, yulan },
  /*  directives: { waves },*/
  data() {
    return {
      /** **********订单详情*********/
      showDetail:false,//订单详情弹出      
      detailForm: {
        orderId: '', // 订单id
        orderName: '', // 订单名称
        orderAddr: '', // 订单地址
        orderClient: '', // 所属客户
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        commission: '', // 佣金
        settleAmount:'',//结算金额
        orderRemark: '', // 订单简介
        orderClerk: '', // 接单人员
        buildArea: '', // 建筑面积
        orderPhoto: [], // 订单照片
        fileList: [], // 附件
        ctime: ''
      },
      passorder: [],
      refusedorder: [],
      star: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      tabName:'first',
      /** **********订单详情结束*********/
      /** **********附件*********/
      showEnclosure: false, // 是否显示附件列表
      enclosreTable: [], // 附件列表数组
      /** **********附件结束**********/
      isSelect: false,
      /** **********数组***********/
      orderClientData: [], // 所属客户数组
      orderClerkData: [], // 接单人员数组
      /** **********数组结束***********/
      labelPosition: 'right', // el-form的label对齐方式
      /** **********查询**********/
      searchForm: {
        orderName: '', // 订单名称
        time: [] // 时间
        // personName: ''// 接单员
      },
      /** **********查询结束**********/
      /** **********table**********/
      tableList: [], // 页面table数据
      listLoading: true, // 加载
      tableHeight: window.screen.availHeight - 380, // table高度
      tableKey: 0,
      isDisabled: false,
      /** **********table结束**********/
      /** **********分页**********/
      total: 0,
      page: 1,
      limit: 10,
      /** **********分页结束**********/

      /** **********订单备注**********/
      remarkFormVisible: false,
      remarkForm: {
        orderId: '',
        orderRemark: ''// 订单备注
      },
      /** **********订单备注结束**********/

      /** **********新增**********/
      startTimeOptions: {
        // 开始时间限制
        disabledDate: function(date) {
          if(this.dialogForm.endDate){
            if(new Date(this.dialogForm.endDate).getTime()>Date.now()){
               return date.getTime() > new Date(this.dialogForm.endDate).getTime()|| date.getTime() < Date.now()- 1000*3600*24
            }else{
               return date.getTime() < Date.now()- 1000*3600*24 ||date.getTime() > Date.now()
            }
          }else{
             return date.getTime() < Date.now()- 1000*3600*24
          }
        }.bind(this)
      },
      endTimeOptions: {
        // 结束时间限制
        disabledDate: function(date) {
          if(this.dialogForm.startDate){
            if( new Date(this.dialogForm.startDate).getTime()-(Date.now())>0){
               return date.getTime() < new Date(this.dialogForm.startDate).getTime()- 1000*3600*24
            }
            else{
               return date.getTime() < Date.now()- 1000*3600*24
            }
          }
           else{
              return date.getTime() < Date.now() - 1000*3600*24
           }
        }.bind(this)
      },
      dialogVisibleImg: false,
      dialogImageUrl: '',
      dialogTitle: '新增',
      dialogFormVisible: false,
      dialogStatus: 'add',
      dialogForm: {
        orderId: '', // 订单id
        orderName: '', // 订单名称
        orderAddr: '', // 订单地址
        orderClient: '', // 所属客户
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        commission: '', // 佣金
        orderRemark: '', // 订单简介
        orderClerk: [], // 接单人员
        buildArea: '', // 建筑面积
        orderPhoto: [], // 订单照片
        fileList: []// 附件（用于向后台发送）
      },
      fileListData: [], // 附件数组(用于展示在前端)
      rulesForm: {
        orderName: [
          { required: true, message: '请输入订单名称', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请选择开始日期', trigger: 'blur' }
        ],
        endDate: [
          { required: true, message: '请选择结束日期', trigger: 'blur' }
        ],
        commission: [
          { required: true, message: '请输入佣金', trigger: 'blur' }
        ],
        orderClerk: [
          { required: true, message: '请选择接单员', trigger: 'blur' }
        ]
      }
      /** **********新增结束**********/
    }
  },
  created() {

  },
  mounted() {
    this.getList()
    this.initArray()
  },
  watch:{
    isSelect(val){
      this.isSelect=val;
    },
  },
  methods: {
    /** **********订单详情*************/
    detailClose() {
      this.showDetail = false
    },
    opendetail(item) {
      this.tabName='first'
      this.showDetail = true
      this.detailForm = {
        orderId: item.id, // 订单id
        orderName: item.orderName, // 订单名称
        orderAddr: item.orderAddress, // 订单地址
        orderClient: item.companyName, // 所属客户
        startDate: item.beginTime, // 开始日期
        endDate: item.endTime, // 结束日期
        commission: item.commission, // 签约金额
        settleAmount:item.settleAmount,//结算金额
        orderRemark: item.remark, // 订单简介
        orderClerk: item.clUserNames, // 接单人员
        buildArea: item.areas, // 建筑面积
        orderPhoto: (item.iocn == null || item.iocn == '') ? [] : item.iocn.split(','), // 订单照片
        fileList: (item.attas == null || item.attas == '') ? [] : JSON.parse(item.attas), // 附件
        ctime: item.ctime
      }
      
      hisquery({
        id:item.id,
        type:''
      }).then(res => {
        if (res.code == 1) {
          const passorder = []
          const refusedorder = []
          if (res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              if (res.data[i].type == 1&&res.data[i].status==1) {
                passorder.push(res.data[i])
              } if((res.data[i].type == 1&&res.data[i].status==2)||res.data[i].type == 3) {
                refusedorder.push(res.data[i])
              }
            }
            this.passorder = passorder
            this.refusedorder = refusedorder
            if (this.passorder.length > 0) {
              this.star = this.passorder[0].assess
            } else {
              this.star = null
            }
          }
        } else {

        }
      })
    },
    /** **********订单详情结束*************/
    /** **********接单员选中和清空*************/
    selectChange(val) {
      console.log(111,val)
      if(val.includes('-1')){
        this.isSelect = true
        this.dialogForm.orderClerk=[]
        this.dialogForm.orderClerk=["-1"]
      }else{
        this.isSelect = false
      }
    },
    removeSelect() {
        this.isSelect = false
    },
    /** **********接单员选中和清空结束*************/
    /** **************接单员+所属客户***************/
    initArray() {
      this.orderClientData = [] // 所属客户数组
      this.orderClerkData = [] // 接单人员数组
      orderClientData({}).then(res => {
        if (res.code == 1) {
          this.orderClientData = res.data
        }
      })
      orderClerkData({}).then(res => {
        if (res.code == 1) {
          this.orderClerkData = res.data
        }
      })
    },
    /** **************接单员+所属客户结束***************/
    /** **************查询***************/
    getList() {
      this.listLoading = true
      orderList({
        status: 1, // 未发布订单
        orderName: this.searchForm.orderName == '' ? null : this.searchForm.orderName, // 订单名称
        //  clUserName:this.searchForm.personName==''?null:this.searchForm.personName,//接单员名称
        beginTime: this.searchForm.time[0], // 开始时间
        endTime: this.searchForm.time[1], // 结束时间
        pageNum: this.page,
        pageSize: this.limit
      }).then(res => {
        if (res.code == 1) {
          this.tableList = res.data.list
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },
    /** **************查询结束***************/

    /** **************重置***************/
    reset() {
      this.searchForm = {
        orderName: '', // 订单名称
        time: [] // 时间
        // personName: ''// 接单员
      }
      this.limit=10;
      this.page=1;
      this.getList()
    },
    /** **************重置结束***************/

    /** **************新增***************/
    // 上传图片
    handleAvatarSuccess(file) {
      this.dialogForm.orderPhoto = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是JPG格式或者PNG格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }
      if (file) {
        const fileData = new FormData()
        fileData.append('file', file)
        uploadFile(fileData).then(res => {
          if (res.code == 1) {
            const fileImg = res.data.url
            this.dialogForm.orderPhoto.push(fileImg)
          } else {
            this.$message({
              type: 'error',
              message: '图片上传失败'
            })
          }
        })
      }
      return false
    },
    // 删除图片
    resertImg(index) {
      this.dialogForm.orderPhoto.splice(index, 1)
    },
    // 上传前
    beforeExcelUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      // const isPDF = file.type === "application/pdf";
      const isLt5M = file.size / 1024 / 1024 < 500
      if (!isJPG && !isPNG) {
        this.$message.error('上传附件只能是JPG格式或者PNG格式!')
        return
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过500M！')
        return
      }
      if (file) {
        let fileArray = null
        const fileData = new FormData()
        fileData.append('file', file)
        uploadFile(fileData).then(res => {
          if (res.code == 1) {
            const fileUrl = res.data.url
            fileArray = {
              name: file.name,
              url: fileUrl,
              time: formatDate(new Date())
            }
            this.dialogForm.fileList.push(fileArray)
          } else {
            this.$message({
              type: 'error',
              message: '附件上传失败'
            })
          }
        })
      }
      return false
    },
    // 删除文件
    excelRemove(file) {
      for (let i = 0; i < this.dialogForm.fileList.length; i++) {
        if (file.uid == this.dialogForm.fileList[i].uid) {
          this.dialogForm.fileList.splice(i, 1)
        }
      }
    },
    //* ****************订单备注***************8*/
    handleRemark(row) { // 弹出
      this.remarkForm = {
        orderId: row.id,
        orderRemark: row.comment
      }
      this.remarkFormVisible = true
    },
    cancelRemark() { // 取消
      this.remarkFormVisible = false
    },
    saveRemark() { // 保存
      saveOrderRemark({
        id:this.remarkForm.orderId,
        comment:this.remarkForm.orderRemark
      }).then(res =>{
        if(res.code==1){
          this.$message({
            type:'success',
            message:'订单备注保存成功'
          })
          this.remarkFormVisible = false;
          this.getList()
        }
      }).catch(()=>{})
    },
    //* ****************订单备注结束***************8*/

    // 弹出dialog
    addFrom() {
      this.dialogStatus = 'add'
      this.dialogTitle = '新增'
      this.dialogFormVisible = true
      this.dialogForm = {
        orderId: '', // 订单id
        orderName: '', // 订单名称
        orderAddr: '', // 订单地址
        orderClient: '', // 所属客户
        startDate: '', // 开始日期
        endDate: '', // 结束日期
        commission: '', // 佣金
        orderRemark: '', // 订单简介
        orderClerk: [], // 接单人员
        buildArea: '', // 建筑面积
        orderPhoto: [], // 订单照片
        fileList: []// 附件（用于向后台发送）
      }
    },
    // 保存
    addData() {
      console.log('add', this.dialogForm.orderClerk)
      let jsonData = null
      jsonData = {
        orderName: this.dialogForm.orderName == '' ? '' : this.dialogForm.orderName, // 订单名称
        orderAddress: this.dialogForm.orderAddr == '' ? '' : this.dialogForm.orderAddr, // 订单地址
        companyId: this.dialogForm.orderClient == '' ? 0 : this.dialogForm.orderClient, // 所属客户
        beginTime: this.dialogForm.startDate == '' ? '' : this.dialogForm.startDate + ' 00:00:00', // 开始时间
        endTime: this.dialogForm.endDate == '' ? '' : this.dialogForm.endDate + ' 23:59:59', // 结束时间
        commission: this.dialogForm.commission == '' ? '' : this.dialogForm.commission, // 佣金
        remark: this.dialogForm.orderRemark == '' ? '' : this.dialogForm.orderRemark, // 订单简介
        clUserId: this.dialogForm.orderClerk.length == 0 ? '' : this.dialogForm.orderClerk.join(','), // 接单人员
        areas: this.dialogForm.buildArea == '' ? '' : this.dialogForm.buildArea, // 建筑面积
        iocn: this.dialogForm.orderPhoto.length == 0 ? '' : this.dialogForm.orderPhoto.join(','), // 订单照片
        attas: this.dialogForm.fileList.length == 0 ? '' : JSON.stringify(this.dialogForm.fileList)// 附件（用于向后台发送）
      }
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          orderAdd(jsonData).then(res => {
            if (res.code == 1) {
              this.cancelForm()
              this.reset()//新增后进行重置(所有的都还原)
              setTimeout(() => {
                this.$message({
                  type: 'success',
                  message: '新增成功'
                })
              }, 500)
            }
          })
        }
      })
    },
    // 关闭dialog
    cancelForm() {
      // this.page = 1
      // this.limit = 10
      this.isSelect = false
      this.dialogFormVisible = false
      this.$refs.dialogForm.resetFields()
      this.$refs.dialogForm.clearValidate()
    },
    // 保存dialog
    /** **************新增结束***************/

    /** **************编辑***************/
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.dialogTitle = '修改'
      orderRowList(row.id).then(res => {
        if (res.code == 1) {
          console.log(111,res.data.clUserIds)
          this.dialogForm = {
            orderId: res.data.id, // 订单id
            orderName: res.data.orderName, // 订单名称
            orderAddr: res.data.orderAddress, // 订单地址
            orderClient: res.data.companyId == 0 ? '' : res.data.companyId, // 所属客户
            startDate: res.data.beginTime, // 开始日期
            endDate: res.data.endTime, // 结束日期
            commission: res.data.commission, // 佣金
            orderRemark: res.data.remark, // 订单简介
            orderClerk: (res.data.clUserIds == null || res.data.clUserIds == '') ? [] : res.data.clUserIds.split(',').map(Number), // 接单人员
            buildArea: res.data.areas, // 建筑面积
            orderPhoto: (res.data.iocn == null || res.data.iocn == '') ? [] : res.data.iocn.split(','), // 封面图
            fileList: (res.data.attas == null || res.data.attas == '') ? [] : JSON.parse(res.data.attas)// 附件
          }
          console.log(res.data.companyId)
          /* 判断接单员是否禁用*/
          if (this.dialogForm.orderClerk[0] == Number('-1')) {
            this.dialogForm.orderClerk=["-1"]
            this.isSelect = true
          } else {
            this.isSelect = false
          }
        } else {
          this.$message.error(res.msg)
        }
      })
      this.dialogFormVisible = true
    },
    // ********************编辑保存****************************/
    updateData() {
      console.log('update', JSON.stringify(this.dialogForm.fileList))
      let jsonData = null
      jsonData = {
        id: this.dialogForm.orderId,
        orderName: this.dialogForm.orderName == '' ? '' : this.dialogForm.orderName, // 订单名称
        orderAddress: this.dialogForm.orderAddr == '' ? '' : this.dialogForm.orderAddr, // 订单地址
        companyId: this.dialogForm.orderClient == '' ? 0 : this.dialogForm.orderClient, // 所属客户
        beginTime: this.dialogForm.startDate == '' ? '' : this.dialogForm.startDate + ' 00:00:00', // 开始时间
        endTime: this.dialogForm.endDate == '' ? '' : this.dialogForm.endDate + ' 23:59:59', // 结束时间
        commission: this.dialogForm.commission == '' ? '' : this.dialogForm.commission, // 佣金
        remark: this.dialogForm.orderRemark == '' ? '' : this.dialogForm.orderRemark, // 订单简介
        clUserId: this.dialogForm.orderClerk.length == 0 ? '' : this.dialogForm.orderClerk.join(','), // 接单人员
        areas: this.dialogForm.buildArea == '' ? '' : this.dialogForm.buildArea, // 建筑面积
        iocn: this.dialogForm.orderPhoto.length == 0 ? '' : this.dialogForm.orderPhoto.join(','), // 订单照片
        attas: this.dialogForm.fileList.length == 0 ? '' : JSON.stringify(this.dialogForm.fileList)// 附件（用于向后台发送）
      }
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          orderUpdate(jsonData).then(res => {
            if (res.code == 1) {
              this.cancelForm()
              this.getList()
              setTimeout(() => {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
              }, 500)
            }
          })
        }
      })
    },
    /** **************编辑结束***************/

    /** **************发布***************/
    handleRelease(row) {
      this.$confirm('是否确认发布' + row.orderName + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderRelease({
          id: row.id,
          status: 2
        }).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: '发布成功'
            })
            this.reset()//所有的都还原进行查询
          }
        })
      }).catch(() => {})
    },
    /** **************发布结束***************/

    /** **************附件***************/
    seeEnclosure(row) {
      this.showEnclosure = true
      this.enclosreTable = JSON.parse(row.attas)
    },
    closeEnclosure() {
      this.showEnclosure = false
    },
    /** **************附件结束***************/

    /** **************删除***************/
    handleDelete(row) {
      this.$confirm('是否确认删除订单' + row.orderName + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderDelete(row.id).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.reset()//所有的都还原进行查询
          }
        })
      }).catch(() => {})
    }
    /** **************删除结束***************/
  }
}
</script>
<style scoped lang="scss">
/* //详情 */
  .passhe {
    display: flex;
    justify-content: space-between;
    box-shadow:0px 2px 4px 0px rgba(203,209,223,0.5);
    margin-top: 20px;
  }
  .pass {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
// 附件
.enclosure_box{
  height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  li{height: 30px;display: flex;flex-direction: row;font-size:14px;color:#333;cursor: pointer;
  &:nth-child(1){//开头的标题
    height:50px;line-height: 50px;background: #408080;color:#fff;
    span{
      line-height: 50px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      text-align: center;
      &:nth-child(1){width:50%;}
      &:nth-child(2){width:30%;}
      &:nth-child(3){width: 20%;color:#fff;}
    }
  }
    span{
      line-height: 30px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      text-align: center;
      &:nth-child(1){width:50%;}
      &:nth-child(2){width:30%;}
      &:nth-child(3){width: 20%;color:#1890ff;}
    }
  }
}
//附件预览
.yulan_box{
  position: fixed;
  left: 0;right: 0;top:0;bottom:0;margin: 0 auto;z-index: 100000;margin-top:15vh;
  width: 880px;height: 800px;overflow-y:auto;overflow-x:hidden;background: #fff;
  padding: 30px;
      .iconB{
      display:inline-block;
      position: absolute;right: 10px;top:10px;
      cursor: pointer;
      font-size: 18px;
    }
}
// .enclosure_box{
//   position: absolute;top:0;left:0;right: 0;bottom: 0; background: #fff;color: #333;padding: 80px 200px;box-sizing:border-box;
//   .enclosure_Body{
//     position: relative;
//     height: 100%;
//     width: 100%;
//     overflow-y: auto;
//     overflow-x: hidden;
//     background: #fff;
//     border:1px solid #c0c0c0;
//     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
//     .iconB{
//       display:inline-block;
//       position: absolute;right: 0;top:0;
//       cursor: pointer;
//       font-size: 26px;
//     }
//   }
// }
  .imagehua {
    position: relative;
    width: 120px;
    height: 120px;
    float: left;
  &:hover .imghua {
     display: block;
   }
  img {
    width: 100% !important;
    height: 100% !important;
  }
  .imghua {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    display: none;
  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  }
  }
  .imagehuaican {
    float: left;
    width: 120px;
    height: 120px;
    position: relative;
  &::before {
     position: absolute;
     left: 50%;
     height: 50%;
     transform: translate(-50%, -50%);
   }
  }
</style>
